<template>
	<div v-loading.fullscreen.lock="loading" class="colorVal column" style="flex: 1">
		<div class="ondiv">
			<el-radio-group v-model="radio">
				<el-radio-button label="pc">PC端</el-radio-button>
				<el-radio-button label="app">手机端</el-radio-button>
			</el-radio-group>
		</div>
		<div style="flex: 1">
			<!-- 电脑端 -->
			<div class="pc column" v-if="radio == 'pc'">
				<div class="Browserherd">
					<el-icon class="ChromeFilled">
						<Back />
					</el-icon>
					<el-icon class="ChromeFilled">
						<Right />
					</el-icon>
					<el-icon class="ChromeFilled">
						<Refresh />
					</el-icon>
					<el-input class="pcinput" v-model="input" disabled placeholder="Please input" />
					<el-icon class="ChromeFilled">
						<Download />
					</el-icon>
					<el-icon class="ChromeFilled">
						<More />
					</el-icon>
				</div>
				<el-scrollbar style="flex: 1" height="653px">
					<draggable class="content" :list="list" :group="{ name: 'people', pull: 'true' }" @change="listChanged" item-key="name">
						<template #item="{ element, index }">
							<div class="list-group pcdivcsss">
								<!-- 这里增加一个定位元素 -->
								<div class="listguanbi">
									<el-tag effect="dark" type="danger" @click="edit(index)">编辑</el-tag>
									<el-icon v-if="element.type != 'header' && element.type != 'footer'" @click="removeAt(index)">
										<CircleCloseFilled />
									</el-icon>
								</div>
								<page :data="element" :logo="logo"></page>
							</div>
						</template>
					</draggable>
				</el-scrollbar>
			</div>
			<!-- 手机端 -->
			<div v-if="radio == 'app'" class="iphone-13">
				<!-- 灵动岛 -->
				<div class="camera"></div>
				<div class="home"></div>
				<!-- 静音 -->
				<div class="mute"></div>
				<!-- 声音大小 -->
				<div class="vocally"></div>
				<div class="underthesound"></div>
				<!-- 熄屏 -->
				<div class="Turnoffthescreen"></div>
				<!-- 内容 -->
				<div class="screen">
					<el-scrollbar style="flex: 1" height="767px">
						<draggable class="content" :list="list" :group="{ name: 'people', pull: 'true' }" @change="listChanged" item-key="name">
							<template #item="{ element, index }">
								<div class="list-group appdivcsss">
									<!-- 这里增加一个定位元素 -->
									<div class="listguanbi">
										<el-tag effect="dark" type="danger" @click="edit(index)">编辑</el-tag>
										<el-icon v-if="element.type != 'header' && element.type != 'footer'" @click="removeAt(index)">
											<CircleCloseFilled />
										</el-icon>
									</div>
									<page :data="element" :logo="logo"></page>
								</div>
							</template>
						</draggable>
					</el-scrollbar>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	import draggable from 'vuedraggable'
	import page from '@/components/page/page.vue'
	export default {
		components: {
			page,
			draggable,
		},
		data() {
			return {
				logo: '',
				loading: false,
				radio: 'pc',
				input: window.location.hostname.toLowerCase().replace(/^www\./, ''),
				list: [
					{
						name: '网站头部',
						type: 'header',
						Classification: 'header',
						web: {
							background: '#303133',
							Contentbackground: '#303133',
							color: '#ebedf0',
							language: 'zh',
						},
					},
				],
			}
		},
		methods: {
			async getdata() {
				// 获取网页设置   如果没有  就获取默认的
				// 需要提供页面   域名  给后端
				// 获取网站配置
				let array = await api('Query', 'websettings', { domain: this.input })
				if (array.code == 200) {
					this.logo = array.data.logo
				}

				this.loading = true
				let page = this.$route.params.page ? this.$route.params.page : 'index'
				let arr = await api('Query', 'parameters', { domain: this.input, page: page })
				if (arr.code == 200 && arr.data) {
					this.list = arr.data.Configuration
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i].Classification == 'header') {
							this.$i18n.locale = this.list[i].web.language
						}
					}
				}
				this.edit(0)
				this.loading = false
			},
			edit(index) {
				if (this.list.length > 0) {
					this.$emit('send-data', this.list[index])
				}
				this.$emit('send-list', this.list)
			},
			listChanged(event) {
				const movedItem = event.added ? event.added.element : event.moved.element // 获取被移动的元素
				const newIndex = event.added ? event.added.newIndex : event.moved.newIndex
				const oldIndex = event.moved?.oldIndex
				// 被移动的元素放在列表的第一个位置
				if (newIndex === 0) {
					this.moveItemToSecond(movedItem, newIndex)
				}
				// 这里其实就可以设置修改哪一个位置
				// 被移动的元素放在列表的最后一个位置
				// else if (newIndex === this.list.length - 1) {
				//   this.moveItemToBeforeLast(movedItem, newIndex)
				// }
			},
			moveItemToSecond(item, oldIndex) {
				// 删除被移动的元素
				this.list.splice(oldIndex, 1)
				// 将元素放在第二个位置
				this.list.splice(1, 0, item)
			},
			moveItemToBeforeLast(item, oldIndex) {
				// 删除被移动的元素
				this.list.splice(oldIndex, 1)
				// 将元素放在倒数第二个位置
				this.list.splice(this.list.length - 1, 0, item)
			},

			// 删除元素
			removeAt(index) {
				// 在这里添加删除特定索引的元素的逻辑

				this.list.splice(index, 1)

				this.edit(0)
			},
		},
		mounted() {
			// 默认设置
			// 获取一个列表
			this.getdata()
		},
	}
</script>
<style scoped>
	.list-group {
		position: relative; /* 将父元素设置为相对定位 */
	}

	.content {
		background: #fff;
	}
	.ChromeFilled {
		font-size: 25px;
		color: #73767a;
	}
	.pc {
		border-radius: 4px 4px 0 0;
		border: 1px solid #b1b3b8;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		width: 960px;
		height: 700px; /* 固定容器高度为 960px */
	}
	.Browserherd {
		display: flex;
		flex-direction: row;
		align-items: center; /* 在垂直方向上居中对齐 */
		justify-content: space-between; /* 水平方向两端对齐，如果需要 */
		padding: 0 20px;
		gap: 10px;
		height: 45px;
		background: #fff;
		border-radius: 4px 4px 0 0;
		border-bottom: 1px solid #b1b3b8;
	}
	.ondiv {
		margin-bottom: 10px;
	}

	.colorVal {
		border: 1px #eee solid;
		background-color: #fff;
		background-image: linear-gradient(45deg, #eee 25%, transparent 0, transparent 75%, #eee 0, #eee), linear-gradient(45deg, #eee 25%, transparent 0, transparent 75%, #eee 0, #eee);
		background-size: 19px 19px;
		background-position: 0 0, 9px 9px;
		align-items: center;
	}
	.iphone-13 {
		width: 385px;
		height: 822px;
		background-color: #000;
		border-radius: 35px;
		position: relative;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	}

	.camera {
		width: 100px;
		height: 18px;
		background-color: rgb(10, 0, 0);
		border-radius: 20px;
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 80;
	}
	.home {
		width: 150px;
		height: 4px;
		background-color: rgb(10, 0, 0);
		border-radius: 20px;
		position: absolute;
		bottom: 12px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 80;
	}
	.mute {
		width: 5px;
		height: 30px;
		background-color: rgb(10, 0, 0);
		border-radius: 4px 0 0 4px;
		position: absolute;
		top: 120px;
		left: -2.5px;
	}
	.vocally {
		width: 5px;
		height: 40px;
		background-color: rgb(10, 0, 0);
		border-radius: 4px 0 0 4px;
		position: absolute;
		top: 165px;
		left: -2.5px;
	}
	.underthesound {
		width: 5px;
		height: 40px;
		background-color: rgb(10, 0, 0);
		border-radius: 4px 0 0 4px;
		position: absolute;
		top: 220px;
		left: -2.5px;
	}
	.Turnoffthescreen {
		width: 5px;
		height: 50px;
		background-color: rgb(10, 0, 0);
		border-radius: 0 4px 4px 0;
		position: absolute;
		right: -2.5px;
		top: 120px;
	}
	.screen {
		padding: 25px 0 20px;
		width: 375px;
		height: 812px;
		background-color: #fff;
		position: absolute;
		top: 5px;
		left: 50%;
		border-radius: 30px;
		transform: translateX(-50%);
		overflow: hidden;
	}
</style>
